<template>
	<view class="pad-top-bottom-24 bg-theme1 mar-top-24 radius24">
		<view class="cell betweenX pad-24 font-28" v-for="(item,index) in payList" :key="index">
			<view class="color-grey">{{item.name}}</view>
			<view v-if="item.isShow" @click="hanldeTypePay(index)">

				<template v-if="scene =='market'">
					<view class="icon-box" v-if="item.market">
						<u-icon v-if="pay == index" size="16" color="#FC6BB0" name="checkbox-mark"></u-icon>
					</view>
					<view v-else class="font-26 color-grey">卖家未支持该支付通道收款</view>
				</template>

				<template v-else>
					<view class="icon-box">
						<u-icon v-if="pay == index" size="16" color="#FC6BB0" name="checkbox-mark"></u-icon>
					</view>
				</template>

			</view>
			<view v-else @click="hanldePayList(item.id)" class="button-pay">去开通</view>
		</view>
	</view>
</template>

<script>
	// 接口地址
	import {
		openWallet,
		payPlat,
		addOpenWalletOrder,
		cashierPay,
		userWalletOPen,
		userWalletInfo
	} from '@/config/api.js'

	export default {
		name: "pay-list",
		props: {
			scene: {
				type: String,
				default: 'goods_sale'
			},
			// 二级市场 用户支持的钱包
			allowPlat: {
				type: Array | Object,
				default: () => ([])
			}
		},
		data() {
			return {
				// 所有钱包列表
				payList: [],
				// 默认支付方式
				pay: 0,
				// 开通了几个支付
				isPay: 0,
				allow_pay_plat: []
			};
		},
		created() {
			this.getPayPlat();
		},
		methods: {
			// 切换支付方式
			hanldeTypePay(inx) {
				this.pay = inx;
				this.$emit('hanldeTypePay', this.payList[inx].id);
			},
			// 开通钱包
			hanldePayList(platId) {
				uni.showLoading({
					title: '开通中...'
				})

				userWalletOPen({
					plat_id: platId
				}).then(res => {

					let {
						open_data,
						need_pay_open_fee
					} = res.data;

					uni.hideLoading();
					// 官方打开的支付
					if (open_data == "") {
						uni.$u.toast('正在对接，敬请期待~');
						return
					}

					// 跳转获取手续费
					if (need_pay_open_fee) {
						this.getJump(platId, open_data);
						return;
					}

					// 快付通
					if (platId == 13) {
						userWalletInfo({
							plat_id: 13
						}).then(res => {
							uni.navigateTo({
								url: '/pages/kftPay/kftPay'
							})
						}).catch(err => {
							uni.showModal({
								title: '提醒',
								content: '去开通快付通',
								success: (res) => {
									if (res.confirm) {
										uni.navigateTo({
											url: '/pages/kftPay/kftPay'
										})
									}
								},

							})
						})
					}

					// 连连支付
					if (platId == 11 || platId == 10) {
						// #ifdef APP-PLUS
						uni.navigateTo({
							url: '/pages/web-view/web-view?url=' + open_data.redirect_url
						})
						// #endif
						// #ifdef H5
						window.location.href = open_data.redirect_url
						// #endif
					}
				})
			},
			// 封装开通手续费
			getJump(platId, open_data) {
				uni.showModal({
					title: '提醒',
					content: open_data,
					success: (res) => {
						if (res.confirm) {
							
							
							// 快付通收取手续费
							if(platId == 13){
								uni.navigateTo({
									url: '/pages/kft/procedures'
								})
								return
							}

							// 创建支付订单
							addOpenWalletOrder({
								plat_id: platId
							}).then(order => {

								// 去支付
								cashierPay({
									order_id: order.data.order_id,
									pay_plat: platId,
									return_url: 'https://h5.xuenuo8.cn/pages/my/wallet?jump=page'
								}).then(pay => {

									let url = pay.data.pay_data.pay_url;
									// #ifdef APP-PLUS
									if (platId == 11 || platId == 10) {
										plus.runtime.openURL(
											`https://h5.xuenuo8.cn/llPay.html?url=${encodeURIComponent(url)}`
										)
									} else {
										uni.navigateTo({
											url: '/pages/web-view/web-view?url=' + url
										})
									}
									// #endif
									// #ifdef H5
									window.location.href = url
									// #endif
								})
							})
						}
					},
				})
			},
			// 获取平台支付方式
			getPayPlat() {
				payPlat({
					scene: this.scene == 'marketList' ? 'market' : this.scene
				}).then(pay => {
					let {
						lists
					} = pay.data;
					// 获取自己开通的钱包
					openWallet().then(res => {
						let {
							yes
						} = res.data;
						this.getPayList(lists, yes);
					})
				})
			},
			// 处理钱包数据
			getPayList(lists, yes) {

				// 二级市场
				if (this.scene == 'market') {
					lists.map((item, index) => {
						item.market = false;
						this.allowPlat.forEach(userPay => {
							if (userPay == item.id) {
								item.market = true;
							}
						})
						item.isShow = false;
						for (let key in yes) {
							if (item.id == key) {
								item.isShow = true;
								this.isPay++
							}
						}
					})

					// 判断开通了几个钱包 全部开通选择第一个钱包
					for (let i = 0; i < lists.length; i++) {
						for (let j = 0; j < this.allowPlat.length; j++) {
							if (this.isPay == lists.length) {
								if (this.allowPlat[j] == lists[i].id) {
									this.pay = i;
									break;
								}
								break;
							} else {
								if (lists[i].isShow && lists[i].market) {
									this.pay = i;
									break
								}
							}
						}
					}

				} else {
					// 一级市场
					lists.map(item => {
						item.isShow = false;
						for (let key in yes) {
							if (item.id == key) {
								item.isShow = true;
								this.isPay++
							}
						}
					})

					// 判断开通了几个钱包 全部开通选择第一个钱包
					for (let i = 0; i < lists.length; i++) {
						if (this.isPay == lists.length) {
							this.pay = 0;
							break;
						} else {
							if (lists[i].isShow) {
								this.pay = i;
								break;
							}
						}
					}
				}

				this.$emit('hanldeTypePay', lists[this.pay].id);
				this.$emit('payNumber', this.isPay);
				this.payList = lists;
			}
		}
	}
</script>

<style scoped lang="scss">
	.icon-box {
		width: 30rpx;
		flex-shrink: 0;
		height: 30rpx;
		border: 1rpx solid #c8c9cc;
		border-radius: 50%;
	}

	.button-pay {
		background: $uni-bg-theme;
		color: #fff;
		font-size: 24rpx;
		line-height: 44rpx;
		padding: 0 20rpx;
		border-radius: 8rpx;
	}
</style>